<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div>
    <van-nav-bar
      title="订单列表"
      left-arrow
      @click-left="onClickLeft"
      placeholder=""
      :fixed="true"
    />
    <div v-for="item in orderlist" class="list" :key="item">
      <van-card
        :price="item.price"
        :desc="item.msg"
        :title="item.cinema"
        :thumb="item.imgurl"
      >
        <template #footer>
          <van-button size="middle" class="delete" @click="removelist(item)"
            >删除订单</van-button
          >
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, reactive } from 'vue'
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    onMounted(() => {
      store.commit('movieData/tabbarCut', false)
    })
    onBeforeUnmount(() => {
      store.commit('movieData/tabbarCut', true)
    })
    const onClickLeft = () => history.back()
    const orderlist = reactive([
      {
        msg: '误杀2',
        cinema: '中影国际影城',
        price: '24.5',
        name: 'a',
        imgurl:
          'https://p0.pipi.cn/mmdb/25bfd68dbe17e1030cf0ee3dd5c16373fabcb.jpg?imageMogr2/thumbnail/2500x2500%3E'
      },
      {
        msg: '喜宝',
        cinema: '万达影院',
        name: 'b',
        price: '44.5',
        imgurl:
          'https://p0.pipi.cn/mmdb/d2dad5925372ff281e3ba3cc433aefa432c03.jpg?imageMogr2/thumbnail/2500x2500%3E'
      },
      {
        msg: '沉睡魔咒2',
        cinema: '百丽宫影院',
        name: 'c',
        price: '96.8',
        imgurl:
          'https://p0.pipi.cn/mmdb/d2dad5927e10fa8ea339ddff48206efd7012e.jpg?imageMogr2/thumbnail/2500x2500%3E'
      },
      {
        msg: '蜘蛛侠：英雄远征',
        cinema: '万达影城',
        name: 'c',
        price: '36.8',
        imgurl:
          '	https://p0.pipi.cn/mmdb/d2dad59253751b537c07acc324cba68de58de.jpg?imageMogr2/thumbnail/2500x2500%3E'
      },
      {
        msg: '千与千寻',
        cinema: '大地影院',
        name: 'c',
        price: '56.8',
        imgurl:
          'https://p0.pipi.cn/mmdb/d2dad592c7e7e1d236ddd2bcc439d544928aa.jpg?imageMogr2/thumbnail/2500x2500%3E'
      }
    ])
    function removelist(item) {
      let index = this.orderlist.indexOf(item)
      if (index !== -1) {
        this.orderlist.splice(index, 1)
      }
    }
    return {
      onClickLeft,
      orderlist,
      removelist
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  margin-bottom: 10px;
  .delete {
    width: 80px;
    border-radius: 10%;
  }
}
</style>
